<!--  -->
<template>
  <div class="dialog-editor-component" v-if="dialogShow">
    <SetDesignDialog :title="'头部容器组件编辑'+ name " :dialogVisible="dialogShow" :close="close" :hasfooter="false" ref="settingDialog">
      <div class="dlg-main-box component-set">
        <el-tabs v-model="activeName">
          <el-tab-pane label="常用组件" name="1">
            <NestingComponentCustomN ref="nestingComponent" :tmpContainerId="tmpContainerId"   :componentTypes="customComponentTypes" :close="close" />
          </el-tab-pane>
        </el-tabs>
      </div>
    </SetDesignDialog>
  </div>
</template>

<script>
import SetDesignDialog from '@/components/common/dialog/SetDesignDialog.vue'
import NestingComponentCustomN from '@/components/common/design/dialog/box/NestingComponentCustomN.vue'
import * as WindowType from '@/config/windowtype.js'
// import * as PubsubType from '@/config/pubsubtype.js'
import VueFunctions from '@/core/VueFunctions.js'
import BackendjsFunctions from '@/core/BackendjsFunctions.js'
// import _ from 'lodash'
import { mapState } from 'vuex'
// import PubSub from 'pubsub-js'
export default {
  data () {
    return {
      dialogShow: false,
      loading: true,
      activeName: '1',
      name: '',
      containerData: null,
      formLabelWidth: '120px',
      // 第几层
      layes: -1,
      // 获取component类型数据
      componentTypes: [],
      // 现有组件的数据
      compData: null,
      // 当前容器tmpId
      tmpContainerId: ''
    }
  },
  computed: {
    ...mapState([
      'design'
    ]),
    customComponentTypes () {
      return this.componentTypes.filter(item => (item.cateType === 1 && item.id !== 7) || item.id === 17 || item.id === 29)
    }
  },
  created () {
    /*
    ***containerData:当前容器数据
    ***layes：嵌套层级
    */
    VueFunctions.method(WindowType.EDIT_EMPTY_CONTAINER_CUSTOMBOX, (containerData, layes) => {
      this.dialogShow = true
      this.componentTypes = BackendjsFunctions.getComponentType()
      this.tmpContainerId = containerData._other._tmpId
      this.layes = layes
    })
  },
  mounted () {
    // PubSub.subscribe(PubsubType.PUBSUB_DIGLOG_COMPONENT_AND_CONTAINER_CLOSE, (event, data) => {
    //   this.close()
    // })
  },
  watch: {
  },
  methods: {
    // 关闭弹出层
    close () {
      this.dialogShow = false
      this.name = ''
      this.containerData = null
      this.activeName = '1'
      this.layes = -1
      this.componentTypes = []
      this.compData = null
    },
    saveclose () {
      this.close()
    }
  },
  components: {
    SetDesignDialog,
    NestingComponentCustomN
  }
}
</script>
